<template>
	<u-form :model=form ref="formref" :rules="rules">
		<u-form-item label="标题" prop="title">
			<u-input v-model="form.title"></u-input>
		</u-form-item>
		<u-form-item label="作者" prop="author">
			<u-input v-model="form.author"></u-input>
		</u-form-item>
		<u-form-item label="内容" prop="content">
			<wang @onclick="getcontent"></wang>
		</u-form-item>
		<u-form-item label="图片">
			<uni-file-picker prop="img" v-model="form.imageValue" :limit="1" fileMediatype="image" mode="grid"
				@select="select" @success="success" :auto-upload="true" />
		</u-form-item>
		<u-form-item>
			<u-button type="primary" @click="submit">提交</u-button>
		</u-form-item>
	</u-form>
</template>

<script setup>
	const db = uniCloud.database()
	import { ref, reactive } from 'vue'
	import wang from '../../components/wangeditor.vue'
	let form = reactive({
		title: '',
		author: '',
		content: '',
		imageValue: []
	})
	let formref = ref()

	//选择图片回调
	const select = (e) => {
		// console.log(e);
		// form.imageValue.push(e.tempFilePaths)
	}
	//成功上传图片回调
	const success = (e) => {
		console.log(e);
		form.imageValue = e.tempFilePaths
	}
	//提交form信息
	const submit = () => {
		formref.value.validate().then(res => {
			console.log(res);
			if (res) {
				console.log(form);
				//向数据酷添加数据
				db.collection('articles').add({
					...form
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: '发表成功',
						success() {
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/index/index"
								})
							}, 500)
						}
					})
				})
			}

		}).catch(err => {
			console.log(err);
		})
	}
	//获取富文本里的内容
	const getcontent = (e) => {
		form.content = e.value
		// console.log(e.value);
	}
	//验证form规则
	let rules = reactive({

		title: {
			type: 'string',
			required: true,
			message: '请输入标题',
			trigger: 'blur'
		},
		content: {
			type: 'string',
			required: true,
			message: '请输入内容',
			trigger: 'blur'
		},
		author: {
			type: 'string',
			required: true,
			message: '请输入作者',
			trigger: 'blur'
		},
		img: {
			type: 'array',
			required: true,
			message: '请上传图片',
			trigger: 'blur'
		}
	})
</script>

<style scoped lang='scss'>

</style>